<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    @import "link.html"
</head>

<body>
<div class="super-theme-example">
    <div id="tree"></div>
    <br/><br/>
    <div style="height: 250px;">
        <table id="ttg" style="width:400px;height:300px"></table>
    </div>
    <script type="text/javascript">
      var tree_data2 = [{
        "id": 1,
        "text": "Node 1",
        "children": [{
          "id": 11,
          "text": "Node 11"
        }, {
          "id": 12,
          "text": "Node 12"
        }]
      }, {
        "id": 2,
        "text": "Node 2"
      }];
      $('#tree').tree({
        data: tree_data2,
        //url: 'js/data/tree_data.json',
        parentField: 'parentId',
        checkbox: true,
        animate: true
      });
      /*------------------------树表格*/
      var treegridJson = [{
        "id": 1,
        "name": "C",
        "size": "",
        "date": "02/19/2010",
        "children": [{
          "id": 2,
          "name": "Program Files",
          "size": "120 MB",
          "date": "03/20/2010",
          "children": [{
            "id": 21,
            "name": "Java",
            "size": "",
            "date": "01/13/2010",
            "state": "closed",
            "children": [{
              "id": 211,
              "name": "java.exe",
              "size": "142 KB",
              "date": "01/13/2010"
            }, {
              "id": 212,
              "name": "jawt.dll",
              "size": "5 KB",
              "date": "01/13/2010"
            }]
          }, {
            "id": 22,
            "name": "MySQL",
            "size": "",
            "date": "01/13/2010",
            "state": "closed",
            "children": [{
              "id": 221,
              "name": "my.ini",
              "size": "10 KB",
              "date": "02/26/2009"
            }, {
              "id": 222,
              "name": "my-huge.ini",
              "size": "5 KB",
              "date": "02/26/2009"
            }, {
              "id": 223,
              "name": "my-large.ini",
              "size": "5 KB",
              "date": "02/26/2009"
            }]
          }]
        }, {
          "id": 3,
          "name": "eclipse",
          "size": "",
          "date": "01/20/2010",
          "children": [{
            "id": 31,
            "name": "eclipse.exe",
            "size": "56 KB",
            "date": "05/19/2009"
          }, {
            "id": 32,
            "name": "eclipse.ini",
            "size": "1 KB",
            "date": "04/20/2010"
          }, {
            "id": 33,
            "name": "notice.html",
            "size": "7 KB",
            "date": "03/17/2005"
          }]
        }]
      }];
      /*树形表格*/
      $('#ttg').treegrid({
        //url: 'js/data/tree_grid_data.json',
        data: treegridJson,
        idField: 'id',
        treeField: 'name',
        columns: [
          [{
            field: 'name',
            title: 'name'
          }, {
            field: 'size',
            title: 'size',
            width: 100
          }, {
            field: 'date',
            title: 'date',
            width: 100
          }]
        ]
      });
    </script>
</div>
</body>

</html>